<template>
  <view class="page">
    <view class="container" :style="{ marginTop: keyboardHeight > 0 ? -keyboardHeight + 'px' : '0' }">
      <view class="login-card">
        <view class="login-header">
          <text class="welcome-text">创建账户</text>
          <text class="subtitle-text">请输入您的信息来注册</text>
        </view>

        <form class="login-form" @submit.prevent="onRegister">
          <view class="form-group">
            <text class="input-label">学校名称</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'school' }">
              <image class="input-icon" src="/static/icon/school.png"></image>
              <input 
                id="school"
                type="text"
                placeholder="请输入学校名称"
                v-model="form.school"
                @focus="onInputFocus('school')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view class="form-group">
            <text class="input-label">学生姓名</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'name' }">
              <image class="input-icon" src="/static/icon/head.png"></image>
              <input 
                id="name"
                type="text"
                placeholder="请输入真实姓名"
                v-model="form.name"
                @focus="onInputFocus('name')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view class="form-group">
            <text class="input-label">账号</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'username' }">
              <image class="input-icon" src="/static/icon/head.png"></image>
              <input 
                id="username"
                type="text"
                placeholder="请输入用户名"
                v-model="form.username"
                @focus="onInputFocus('username')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view class="form-group">
            <text class="input-label">邮箱</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'email' }">
              <image class="input-icon" src="/static/icon/mail.png"></image>
              <input 
                id="email"
                type="text"
                placeholder="请输入邮箱地址"
                v-model="form.email"
                @focus="onInputFocus('email')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view class="form-group">
            <text class="input-label">学号</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'studentId' }">
              <image class="input-icon" src="/static/icon/hat.png"></image>
              <input 
                id="studentId"
                type="text"
                placeholder="请输入学号"
                v-model="form.studentId"
                @focus="onInputFocus('studentId')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view class="form-group">
            <text class="input-label">密码</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'password' }">
              <image class="input-icon" src="/static/icon/lock.png"></image>
              <input 
                id="password"
                type="password"
                placeholder="请输入密码"
                v-model="form.password"
                @focus="onInputFocus('password')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view class="form-group">
            <text class="input-label">确认密码</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'confirmPassword' }">
              <image class="input-icon" src="/static/icon/lock.png"></image>
              <input 
                id="confirmPassword"
                type="password"
                placeholder="请再次输入密码"
                v-model="form.confirmPassword"
                @focus="onInputFocus('confirmPassword')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view v-if="statusMessage" :class="['status-message', statusType]">
            {{ statusMessage }}
          </view>

          <button class="login-button" :class="{ 'loading': isLoading }" @click="onRegister">
            {{ isLoading ? '注册中...' : '立即注册' }}
          </button>

          <view class="signup-link">
            已有账户? <text @click="onLogin">立即登录</text>
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        school: '',
        name: '',
        username: '',
        email: '',
        studentId: '',
        password: '',
        confirmPassword: ''
      },
      focusedInput: '',
      statusMessage: '',
      statusType: '',
      isLoading: false,
      keyboardHeight: 0
    }
  },
  onLoad() {
    // 监听键盘高度变化
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  methods: {
    onInputFocus(inputName) {
      this.focusedInput = inputName
    },
    onInputBlur() {
      this.focusedInput = ''
    },
    async onRegister() {
      // 表单验证
      if (!this.form.school) {
        this.showError('请输入学校名称')
        return
      }
      
      if (!this.form.name) {
        this.showError('请输入学生姓名')
        return
      }
      
      if (!this.form.username) {
        this.showError('请输入账号')
        return
      }
      
      // 邮箱验证
      if (!this.form.email) {
        this.showError('请输入邮箱地址')
        return
      }
      
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(this.form.email)) {
        this.showError('请输入有效的邮箱地址')
        return
      }
      
      if (!this.form.studentId) {
        this.showError('请输入学号')
        return
      }
      
      if (!this.form.password) {
        this.showError('请输入密码')
        return
      }
      
      if (this.form.password !== this.form.confirmPassword) {
        this.showError('两次输入的密码不一致')
        return
      }

      this.isLoading = true
      this.statusMessage = ''

      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        this.showSuccess('注册成功！正在跳转...')
        // 这里添加实际的注册逻辑
        setTimeout(() => {
          // 跳转到登录页面
          uni.redirectTo({
            url: '/pages/login/login'
          })
        }, 1000)
      } catch (error) {
        this.showError('注册失败，请稍后重试')
      } finally {
        this.isLoading = false
      }
    },
    onLogin() {
      uni.navigateBack()
    },
    showError(message) {
      this.statusMessage = message
      this.statusType = 'error'
    },
    showSuccess(message) {
      this.statusMessage = message
      this.statusType = 'success'
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e6f2ff 0%, #c2e1ff 100%);
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 600rpx;
}

.login-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(44, 106, 160, 0.1);
  backdrop-filter: blur(10rpx);
}

.login-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.welcome-text {
  display: block;
  font-size: 48rpx;
  color: #2c6aa0;
  font-weight: 600;
  margin-bottom: 10rpx;
}

.subtitle-text {
  display: block;
  font-size: 28rpx;
  color: #5a7d9a;
  margin-bottom: 40rpx;
}

.form-group {
  margin-bottom: 25rpx;
}

.input-label {
  display: block;
  color: #4a7ba6;
  font-size: 28rpx;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.input-container {
  position: relative;
  transition: all 0.3s ease;
}

.input-container.focused {
  transform: scale(1.02);
}

.input-icon {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 32rpx;
  height: 32rpx;
}

.input-container input {
  width: 82%;
  height: 90rpx;
  padding: 0 30rpx 0 70rpx;
  border: 2rpx solid #c2d9f0;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.8);
  color: #2c6aa0;
  font-size: 30rpx;
  transition: all 0.3s ease;
}

.input-container.focused input {
  background: rgba(255, 255, 255, 0.95);
  border-color: #4a90e2;
  box-shadow: 0 0 0 4rpx rgba(74, 144, 226, 0.2);
}

.action-row {
  display: flex;
  justify-content: flex-end;
  margin: 20rpx 0 30rpx;
}

.forgot-password {
  color: #4a90e2;
  font-size: 26rpx;
}

.status-message {
  text-align: center;
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 26rpx;
}

.status-message.error {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 2rpx solid rgba(231, 76, 60, 0.2);
}

.status-message.success {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border: 2rpx solid rgba(46, 204, 113, 0.2);
}

.login-button {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #4a90e2 0%, #2c6aa0 100%);
  border: none;
  border-radius: 16rpx;
  color: white;
  font-size: 32rpx;
  font-weight: 600;
  margin: 20rpx 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.3);
  transition: all 0.3s ease;
}

.login-button.loading {
  opacity: 0.8;
  pointer-events: none;
}

.login-button:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 10rpx rgba(74, 144, 226, 0.2);
}

.signup-link {
  text-align: center;
  color: #5a7d9a;
  font-size: 26rpx;
  margin-top: 20rpx;
}

.signup-link text {
  color: #4a90e2;
  font-weight: 500;
}

@media screen and (min-width: 768rpx) {
  .login-card {
    padding: 60rpx 50rpx;
  }
}
</style>